import React, { useCallback, useRef,useState } from "react";
import { useDispatch } from "react-redux";
import { Modal } from "antd-mobile";
import "antd-mobile/dist/antd-mobile.css";
import '../style.scss'
export default function CartItem({ data }) {
    const dispatch = useDispatch();
   
    return (
        <>
        
            <div className="cart-item">
                <div className="item">
                    <div className="img">
                        <img src={data.get("goodsImg")} alt="" />
                    </div>
                    <div className="info">
                        <h3 className="title">{data.get("goodsName")}</h3>
                        <ul className="selected-list">
                            {data.get("selected").map((item) => (
                                <li
                                    className="selected-item"
                                    key={item.get("id")}
                                >
                                    {item.get("value")}
                                </li>
                            ))}
                            <li className="iconfont icon-below-s"></li>
                        </ul>
                        <div className="order">
                            <span>¥{data.get("retailPrice")}</span>
                            <span>¥{data.get("counterPrice")}</span>
                            <span>共{data.get("count")}件</span>
                        </div>
                        
                    </div>
                </div>
            </div>
            </>
    );
}
